<template>
  <el-row gutter="20">
    <el-col :span="20">
      <el-form ref="form" :model="form" label-width="200px">
        <el-form-item label="编号/ID">
          <el-input v-model="form.id" :disabled = "true"></el-input>
          <el-divider></el-divider>
        </el-form-item>
        <el-form-item label="密码/Password">
          <el-input v-model="form.password" show-password = false></el-input>
          <el-divider></el-divider>
        </el-form-item>
        <el-form-item label="好友/Penpal">
          <el-input v-model="form.pal_id" :disabled="true"></el-input>
          <el-divider></el-divider>
          <el-input v-model="form.pal_name" :disabled = "true"></el-input>
          <el-divider></el-divider>
          <el-input v-model="form.pal_description" :disabled = "true"></el-input>
        </el-form-item>
        <el-form-item label="昵称/Name">
          <el-input v-model="form.name" placeholder="请输入你的新昵称"  maxlength="10" show-word-limit></el-input>
          <el-divider></el-divider>
        </el-form-item>
        <el-form-item label="描述/Description">
          <el-input v-model="form.description" placeholder="请输入你的个人描述"  maxlength="45" autosize show-word-limit></el-input>
          <el-divider></el-divider>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="quit" style="margin-right: 100px;">离开</el-button>
          <el-button type="primary" @click="update">更新</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-col :span="4" class="grid-content bg-purple-light">
    </el-col>
  </el-row>

</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        form: {
          id:localStorage.getItem("user_id"),
          name:localStorage.getItem("user_name"),
          pal_id:localStorage.getItem("user_penpal_id"),
          pal_name:"",
          pal_description:"",
          description:localStorage.getItem("user_description"),
          password:localStorage.getItem("user_password"),
        }
      }
    },
    created:function(){
      this.show()
    },
    methods: {
      show(){
        var _this = this;
        var pal_id = localStorage.getItem("user_penpal_id");
        var token = localStorage.getItem("token");
        axios.post('http://oneday.vaiwan.com/user/show/'+pal_id,{},{headers: {  token: `${token}`  }})
                .then(function(response) {
                    //成功时服务器返回 response 数据
                    if(response.data.success){
                      alert("show success!");
                      _this.$data.form.pal_name = response.data.data.name;
                      _this.$data.form.pal_description = response.data.data.description;
                    }else{
                      alert("show failed!")
                    }
                    console.log(response);
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
      quit(){
        var _this = this;
        _this.$router.replace("/home");
      },
      update(){
        var name = this.$data.form.name;
        var description = this.$data.form.description;
        var token = localStorage.getItem("token");
        if (this.$data.form.id == "" || this.$data.form.name == "" || this.$data.form.password == ""){
          alert("不能为空");
        } else {
          alert("正在更新数据中……");
            //向服务器提交数据
            axios.post('http://oneday.vaiwan.com/user/update', {
                    description: this.$data.form.description,
                    id: this.$data.form.id,
                    name: this.$data.form.name,
                    pal:this.$data.form.pal,
                    password: this.$data.form.password,
                },{headers: {  token: `${token}`  }})
                .then(function(response) {
                    //成功时服务器返回 response 数据
                    if(response.data.success){
                      alert("update success!");
                      localStorage.setItem("user_name",name),
                      localStorage.setItem("user_description",description)
                    }else{
                      alert("update failed!")
                    }
                })
                .catch(function(error) {
                    console.log(error);
                    alert("请重新登录！");
                    _this.$router.push("/");
                });
        }
      },
    }
  }
</script>

<style>
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 40px;
    min-height: 36px;
  }
</style>
